<template>
  <el-dialog
    v-model="dialogVisible"
    title="反馈审批"
    width="50%"
    :before-close="handleClose"
  >
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120"
    >
      <el-form-item label="处理结果" prop="processingResults">
        <el-select v-model="ruleForm.processingResults" placeholder="请选择">
          <el-option
            v-for="item in processingResultsOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="处理方案">
        <el-input
          v-model="ruleForm.action"
          type="textarea"
          placeholder="请输入处理方案"
          show-word-limit
          :rows="10"
        />
      </el-form-item>
      <el-form-item label="补偿方案">
        <el-select v-model="ruleForm.compensate" placeholder="请选择">
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          确定
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, onMounted } from "vue";
import type { FormInstance, FormRules } from "element-plus";
interface RuleForm {
  processingResults: string;
  action: string;
  compensate: string;
}
const props = defineProps(["open"]);
const status: any = reactive(props);
// eslint-disable-next-line vue/no-dupe-keys
const { open } = toRefs(status);
// 返回参数方法
const emits = defineEmits("editChange");
// 控制显示隐藏
const dialogVisible = ref<boolean>(false);
// 关闭
const handleClose = () => {
  dialogVisible.value = false;
  emits("editChange", dialogVisible.value);
};
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  processingResults: "",
  action: "",
  compensate: ""
});
// 处理结果
const processingResultsOptions = reactive<any>([
  {
    value: "1",
    label: "同意"
  },
  {
    value: "2",
    label: "拒绝"
  }
]);
// 账号状态
const statusOptions = reactive<any>([
  {
    value: "1",
    label: "正常"
  },
  {
    value: "2",
    label: "禁用"
  }
]);
// 校验规则
const rules = reactive<FormRules<RuleForm>>({
  processingResults: [
    {
      required: true,
      message: "请选择处理结果",
      trigger: ["blur", "change"]
    }
  ]
});
// 确定
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  handleClose();
};

onMounted(() => {
  dialogVisible.value = open;
});
</script>
